<!-- 定义模版对象 -->
<template>
    <div class="index_container">
      <div class="header_box">
        <el-row class="but_row">
          <el-button icon="el-icon-user" circle></el-button>
          <el-button icon="el-icon-edit" circle></el-button>
        </el-row>
      </div>
      <div class="search_box">
        <!-- <input type="text" id="search_input"/>搜索 -->
        <el-input
        type="text"
        v-model="queryInfo.query"
        placeholder="搜索书籍. . ."
        class="search_input"
        prefix-icon="el-icon-arrow-right"
        @keyup.enter.native="gosearch()">
        </el-input>
      </div>
    </div>
</template>

<!-- 定义JS变量 -->
<script scoped>
export default {
  data(){
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 15
      }
    }
  },
  methods: {
    async gosearch(){
      // alert("yes")
      console.log(this.queryInfo.query)
      // let {data:res} = this.$http.get('/book/searchall',this.queryInfo)
      // if(res.status !== 200) return this.$message.error("查询出错")
      // this.$message.success("查询成功")
      const {data: res} =  await this.$http.get('/book/searchall',{
        params: this.queryInfo
      })
      // console.log(this.queryInfo)
      if(res.status !== 200) return this.$message.error("查询失败")
      this.$message.success("查询成功")
      console.log(res)
    }
  }
}
</script>


<!-- 防止组件冲突 -->
<style lang="less" scoped>
.index_container{
  background: #3494E6;
  background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
  background: linear-gradient(to right, #EC6EAD, #3494E6);
  height: 100%;
}

.search_box {
  position: absolute;
  left: 40%;
  top: 40%;
}

.search_input{
  border-radius: 10px;
  height: 20px;
}

.but_row{
  position: absolute;
  left: 80%;
  top: 5%;
}
</style>
